<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册 </title>

    <link rel="stylesheet" type="text/css" href="./css/register.css">

<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
    <script src="./js/vue2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script type="text/javascript" src="./js/qs.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>

</head>


<body class="pg-unitive-signup theme">

<div class="content " id="app">
    <div style="display: flex" >
        <div >
            <img src="./images/user/login_side_pic.jpg" width="480" height="370" >
        </div>
        <div class="sheet" style="display:block">
            <div class="form-field form-field--mobile">
                <label>手机号</label>
                <input type="text" name="mobile" v-model="form.cellPhone" class="f-text J-mobile">

            </div>
            <div class="form-field form-field--vbtn">
                <label>图片验证码</label>

                <div class="J-captcha captcha-wrapper" style="display:none" hidden="true">
                    <input type="text" id="captcha-mobile" class="f-text J-captcha" name="captcha-mobile"
                           autocomplete="off">
                    <img id="signup-captcha-mobile-img" height="34px" width="60px"
                         class="signup-captcha-img J-captcha-refresh" src="./css/captcha">
                    <span class="J-captcha-tip inline-tip"></span>
                </div>
                <div class="verify-wrapper">
                    <input type="button" @click="queryVerifyCode" class="btn-normal btn-mini verify-btn J-verify-btn"
                           value="免费获取短信动态码">
                    <span class="f1 verify-tip" id="J-verify-tip"></span>
                </div>

            </div>
            <div class="form-field form-field--sms">
                <label>短信动态码</label>
                <input type="text" v-model="form.verifyCode" name="verifycode" class="f-text J-sms">
            </div>
            <div class="form-field form-field--pwd">
                <label>创建密码</label>
                <input type="password" name="password" v-model="form.userPassword" class="f-text J-pwd">
            </div>
            <div class="form-field form-field--pwd2">
                <label>确认密码</label>
                <input type="password" name="password2" v-model="form.userPassword2" class="f-text J-pwd2">
            </div>
            <div class="slider-verify-wrapper" style="display:none">
                <div class="slider-verify-pop-bg"></div>
                <div id="slider-verify"></div>
            </div>
            <div class="form-field">
                <input @click="doRegister" type="button" name="commit" class="btn"
                       value="注册">
            </div>
            <input type="hidden" name="fingerprint" class="J-fingerprint">
        </div>
    </div>

</div>


</body>
<script>
    let vm = new Vue({
        el: "#app",//绑定，告知vue负责管理页面的哪个部分ss
        data: {

            form: {
                userAccount: '',
                userPassword: '',
                cellPhone: '',
                verifyCode: '',
                userPassword2:''
            }
        },
        methods: {
            //获取动态验证码
            /**
             * url: user/generateCellphoneCode
             * method: get
             * param: cellPhone 手机号
             * return 无
             */
            queryVerifyCode() {


            },
            validCellPhone(){

            },
            validUserPassword(){

            },
            //注册新用户
            /**
             * url: user/register
             * method: post
             * param: this.form
			 * 检查手机号必须输入
			 * 检查手机号必须11位
			 * 检查密码必须输入
			 * 检查密码最少3位
			 * 检查两次密码输入必须相同
             * return 无
             * 在响应函数中
             *   页面跳转到login.html
             */
            doRegister() {

            },


        },
        created() {

        }
    })
</script>
</html>
